<template>
  <div class="login">
    <div class="user">
      <div class="index left1">
        <div class="title" style="margin: 100px 0 50px 0; font-size: 30px">
          登 录
        </div>
        <div class="sjh">
          <div style="margin-bottom: 20px">
            <input
              v-model="phone"
              @focus="setRegName('')"
              @blur="setRegShow"
              type="text"
              placeholder="请输入手机号"
              placeholder-style="color:#999999;"
              style="
                width: 250px;
                padding: 10px;
                border-radius: 5px;
                border: 2px solid black;
              "
            />
            <div v-if="myshow" class="tishi">手机号格式错误！</div>
			
          </div>
        </div>
        <div class="sjh">
          <input
            type="password"
            v-model="password"
            @focus="setRegName('')"
            placeholder="请输入密码"
            placeholder-style="color:#999999;"
            style="
              width: 250px;
              padding: 10px;
              border-radius: 5px;
              border: 2px solid black;
            "
          />
		  <div v-if="myshow1" class="tishi">密码格式错误！</div>	
        </div>
        <div class="bottom">
          <div
            class="left"
            @click.prevent="handleresetpwd"
            style="margin: 15px"
          >
            忘记密码
          </div>
          <div class="right">
            还没有账号？<span @click.prevent="handleregister">立即注册</span>
          </div>
        </div>
        <div class="btn" @click.prevent="handlelogin" @click="ismysignin">登录</div>
      </div>
      <div class="right1"></div>
    </div>
    <my_footer />
  </div>
</template>

<script>
import { RegularVerification } from '../../common/regular.js'
import { mapState, mapMutations } from "vuex";
export default {
  computed:{
    ...mapState(["show", "regshow", "regnames","userid","username","usertel","usertel","isLogin"])
  },
	data() {
		return {
			//创建一个空值 保存焦点到input框内容
      regname: "",
			myshow:false,
			myshow1:false,
			phone: '', // 手机号
			password:'', // 密码
			
		}
	},
	methods: {
    ...mapMutations(["setshow", "setregshow", "setregname","setuserid","setusername","setusertel","setuserpwd","setislogin"]),
		handlelogin:function()
			{
				
			if(this.phone===localStorage['phone'] && this.password===localStorage['password'])
			{
				this.$router.replace('/');//如果输入的名字以及密码正确路由跳转至主页
			}
			else if(this.phone==='')//手机号为空
			{
				this.$message('手机号不为空');
			}
			else if(this.password==='')//密码为空
			{
				this.$message('密码不为空');
			}
			else{
				// this.$message('账号不存在，请先注册后登录');//查无此号
				}
			},
		handleregister:function()
			{
			this.$router.replace('/register')//点击注册按钮，跳转至注册页面
			},
		handleresetpwd:function()
			{
			this.$router.replace('/resetpwd')//点击忘记密码按钮，跳转至重置密码页面
			},
    ismysignin(){
      //发送get请求发送用户 手机号和密码 查找用户
      this.axios.get('/signin',{params:{phone:this.phone,password:this.password}})
      .then(res => {
        console.log(res.data);
        //判断是否返回成功
        let obj = {}
        obj=res.data.data[0];
        //如果成功 保存用户数据到vuex
        if(res.data.code==200){
          //将token保存至localstorage中
          localStorage.setItem("token","1")
          console.log(localStorage.getItem("token"))
          //传参id
          this.setuserid(obj.uid)
            // //传参手机号
          this.setusertel(obj.phone)
            // //传参密码
          this.setuserpwd(obj.password)
          //登录状态
          this.setislogin(res.data.code==200);
          //完成登录后隐藏
          this.$router.replace('/')
          setTimeout(()=>{
            localStorage.setItem("token","0");
          },7200000)
        }
      })

    },
    //用一个函数来修改点击input框的 要做正则表达式判断的名字
    setRegName(regname) {
      let reg = /^1[3-9]\d{9}$/;
      let regs = /^[A-Za-z\d]{6,10}$/;
      if (this.show == true) {
        regname =
          reg.test(this.phone) != true
            ? "手机号"
            : regs.test(this.password) != true
            ? "密码"
            : "";

        this.setregname(regname);
      }
    },
    setRegShow() {
      //用正则表达式来判断所在的输入框是否符合要求
      if (this.phone != "") {
        let reg = /^1[3-9]\d{9}$/;
        this.setregshow(!reg.test(this.phone));
      }
    }
	},
	watch:{
		phone(){
			let reg = /^[1][3,4,5,7,8][0-9]{9}$/
			if(!reg.test(this.phone)){
				this.myshow=true
			}else if(reg.test(this.phone)){
				this.myshow=false
			}
			else{
        this.myshow=false
      }
      if(this.phone==""){
        this.myshow=false
      }
		},
		password(){
			//强密码(必须包含大小写字母和数字的组合，可以使用特殊字符，长度在 8-10 之间)
			let reg1 = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/;
			if(!reg1.test(this.password)){
				this.myshow1=true
			}else if(reg1.test(this.password)){
				this.myshow1=false
			}
			else{
				this.myshow1=false
				
			}
      if(this.password==""){
        this.myshow1=false
      }
		}
	}


}
</script>

<style scoped lang="scss">
.index {
  padding: 0 15px;
}
.login {
  .user {
    width: 100%;
    height: 900px;
    position: relative;
    .left1 {
      width: 20%;
      height: 900px;
      background-color: rgba(226, 229, 229, 0.644);
      display: inline-block;
      position: absolute;
      left: 0;
    }
    .right1 {
      width: 80%;
      height: 900px;
      // border: 1px solid black;
      display: inline-block;
      background-size: 100% auto;
      background-repeat: no-repeat;
      background-image: url("../../public/login/bacc.png");
      position: absolute;
      right: 0;
    }
  }
}
.title {
  // padding-top: 78px;
  margin-bottom: 35px;
  font-family: PingFangSC-Bold;
  // font-size: 40rpx;
  font-weight: 600;
  font-stretch: normal;
  letter-spacing: 0;
  color: #333333;
}

.sjh {
  margin-top: 18px;
  padding: 10px 0;
  border-bottom: 1px solid #eeeeee;
  div:nth-child(1) {
    font-family: PingFangSC-Medium;
    font-size: 15px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0;
    color: #333333;
  }

  div:nth-child(2) {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    image {
      width: 21px;
      height: 12px;
    }

    .yzm {
      font-family: PingFangSC-Regular;
      font-size: 13px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0;
      color: #4d77ff;
    }
  }
 .tishi {
    font-family: PingFangSC-Regular;
    font-size: 13px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0;
    color: red;
	position: relative;
	left: 50px;
  }
  input {
    margin-top: 10px;
  }
}

.bottom {
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left {
    font-family: PingFangSC-Regular;
    font-size: 13px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0;
    color: #4d77ff;
  }
  .right {
    font-family: PingFangSC-Regular;
    font-size: 13px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #333333;
    span {
      font-family: PingFangSC-Regular;
      font-size: 13px;
      font-weight: normal;
      letter-spacing: 0;
      color: #4d77ff;
    }
  }
}

.btn {
  // margin: 0 18px;
  margin-top: 40px;
  margin-left: 130px;
  width: 100px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: #424242;
  border-radius: 3px;
  font-family: PingFangSC-Medium;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0;
  color: #ffffff;
  cursor: pointer;
}
</style>
